<template>
  <div id="bottomRight">
    <div class="bg-color-black">
      <div class="pt-2">
        <!-- <span>
          <icon name="chart-area" class="text-icon"></icon>
        </span> -->
        <div class="d-flex" style="margin-top: 10px">
          <span
            class="text mx-2"
            style="font-size: 18px; color: #108b96; font-weight: 600"
            >本月数据统计</span
          >
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
            padding: 0 10px;
          "
        >
          <div class=" " style="position: relative">
            <!-- <dv-decoration-2 :reverse="true" style="width: 5px; height: 6rem" /> -->
            <el-progress
              type="dashboard"
              :percentage="100"
              :show-text="false"
              color="#f5d04e"
              stroke-width="4"
            ></el-progress>
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 30%;
                width: 126px;
              "
            >
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <div style="font-size: 13px">
                  <span style="font-size: 24px">1515</span>
                  单
                </div>
                <div style="color: #f5d04e; font-size: 13px; margin-top: 5px">
                  月订单量
                </div>
              </div>
            </div>
            <div
              style="
                position: absolute;
                bottom: 0;
                width: 126px;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <span
                style="
                  border: 1px solid #f5d04e;
                  border-radius: 5px;
                  padding: 3px;
                  font-size: 13px;
                "
                >增长50%</span
              >
            </div>
          </div>
          <div class=" " style="position: relative">
            <!-- <dv-decoration-2 :reverse="true" style="width: 5px; height: 6rem" /> -->
            <el-progress
              type="dashboard"
              :percentage="100"
              :show-text="false"
              color="#f5d04e"
              stroke-width="4"
            ></el-progress>
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 30%;
                width: 126px;
              "
            >
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <div style="font-size: 13px">
                  <span style="font-size: 24px">1515</span>
                  单
                </div>
                <div style="color: #f5d04e; font-size: 13px; margin-top: 5px">
                  月订单量
                </div>
              </div>
            </div>
            <div
              style="
                position: absolute;
                bottom: 0;
                width: 126px;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <span
                style="
                  border: 1px solid #f5d04e;
                  border-radius: 5px;
                  padding: 3px;
                  font-size: 13px;
                "
                >增长50%</span
              >
            </div>
          </div>
        </div>
      </div>
      <!-- <div>
        <BottomRightChart />
      </div> -->
    </div>
  </div>
</template>

<script>
// import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
export default {
  components: {
    // BottomRightChart,
  },
};
</script>

<style lang="scss" class>
$box-height: 260px;
$box-width: 350px;
#bottomRight {
  padding: 20px 14px 20px 14px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: 266px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  //下滑线动态
  .decoration2 {
    position: absolute;
    right: 0.125rem;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
</style>
